<template>
  <div
    class="chat-item"
    :class="active ? 'active' : ''"
    @contextmenu.prevent="showRightMenu($event)"
  >
    <div class="chat-left">
      <!-- <el-avatar :icon="UserFilled" /> -->
      <el-avatar
        :src="
          !!chat.headImage
            ? chat.headImage
            : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        "
      />
      <!-- <head-image :url="chat.headImage" :name="chat.showName" :size="42"
				:id="chat.type == 'PRIVATE' ? chat.targetId : 0" :isShowUserInfo="false"></head-image>
			<div v-show="chat.unreadCount > 0" class="unread-text">{{ chat.unreadCount }}</div> -->
    </div>
    <div class="chat-right">
      <div class="chat-name">
        <div class="chat-name-text">
          <div>{{ chat.nickName }}</div>
          <!-- <el-tag v-if="chat.type == 'GROUP'" size="mini" effect="dark">群</el-tag> -->
        </div>
        <div class="chat-time-text">{{ showTime() }}</div>
      </div>
      <div class="chat-content">
        <div class="chat-content-text">asddsd</div>
        <!-- <div class="chat-at-text">{{ atText }}</div>
				<div class="chat-send-name" v-show="isShowSendName">{{ chat.sendNickName + ':&nbsp;' }}</div>
				<div class="chat-content-text" v-html="$emo.transform(chat.lastContent)"></div> -->
      </div>
    </div>
    <!-- <right-menu v-show="rightMenu.show" :pos="rightMenu.pos" :items="rightMenu.items"
			@close="rightMenu.show = false" @select="onSelectMenu"></right-menu> -->
  </div>
</template>

<script setup>
const props = defineProps({
  chat: {
    type: Object,
    required: true,
  },
});
const showTime = () => {
  //return date.toTimeText(props.chat.lastSendTime, true)
  return "02.05";
};
</script>

<style lang="scss">
.chat-item {
  height: 50px;
  display: flex;
  position: relative;
  padding: 5px 10px;
  align-items: center;
  background-color: var(--im-background);
  white-space: nowrap;
  cursor: pointer;

  &:hover {
    background-color: var(--im-background-active);
  }

  &.active {
    background-color: var(--im-background-active-dark);
  }

  .chat-left {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .unread-text {
      position: absolute;
      background-color: #f56c6c;
      right: -4px;
      top: -8px;
      color: white;
      border-radius: 30px;
      padding: 1px 5px;
      font-size: 10px;
      text-align: center;
      white-space: nowrap;
      border: 1px solid #f1e5e5;
    }
  }

  .chat-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    text-align: left;
    overflow: hidden;

    .chat-name {
      display: flex;
      line-height: 20px;
      height: 20px;

      .chat-name-text {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: var(--im-font-size);
        white-space: nowrap;
        overflow: hidden;

        .el-tag {
          min-width: 22px;
          text-align: center;
          background-color: #2830d3;
          border-radius: 10px;
          border: 0;
          height: 16px;
          line-height: 16px;
          font-size: 10px;
          margin-left: 2px;
          opacity: 0.8;
        }
      }

      .chat-time-text {
        font-size: 12px;
        text-align: right;
        color: var(--im-text-color-light);
        white-space: nowrap;
        overflow: hidden;
        padding-left: 10px;
      }
    }

    .chat-content {
      display: flex;
      line-height: 22px;

      .chat-at-text {
        color: #c70b0b;
        font-size: var(--im-font-size-smaller);
      }

      .chat-send-name {
        font-size: var(--im-font-size-small);
        color: var(--im-text-color-light);
      }

      .chat-content-text {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--im-font-size-small);
        color: var(--im-text-color-light);

        img {
          width: 20px !important;
          height: 20px !important;
          vertical-align: bottom;
        }
      }
    }
  }
}
</style>
